<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="add">新增</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
</body>
<script>
    var add = document.getElementsByClassName("add")[0];
    var get = document.getElementsByClassName("get")[0];
    var edit = document.getElementsByClassName("edit")[0];
    var del = document.getElementsByClassName("del")[0];


    // cookie的新增:
    // 1. cookie的存取都依赖于document.cookie
    // 2. cookie是以键值对(key=value)形式存在的字符串
    // 3. cookie存储的时候是一条一条存的, 取的时候将所有cookie整合到一起返回,用"; "分隔
    // 4. cookie可以设置存储路径和过期时间


    // cookie的获取:
    // 1. cookie的存取都依赖于document.cookie
    // 2. cookie是以键值对(key=value)形式存在的字符串
    // 3. cookie存储的时候是一条一条存的, 取的时候将所有cookie整合到一起返回,用"; "分隔


    // cookie的修改
    // 1. 对应键名设置键值即可(没有就新增  有就修改)


    // cookie的删除
    // 1. 将cookie的过期时间设置为已经过去的时间 => cookie就会过期 => 无法获取
    // 2. 过期的cookie统一在浏览器关闭,窗口关闭,页面刷新之后删除
    // 3. 为保护数据安全 => 删除时可将数据赋值为""

    add.onclick = function () {
        setCookie("user", "a123123");
        setCookie("pwd", "123123");
        setCookie("phone", "17386141517", 7 * 24 * 60 * 60);
        setCookie("email", "123123@qq.com", 7 * 24 * 60 * 60);
    }

    get.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("hello"));
    }

    edit.onclick = function () {
        setCookie("user", "b123123", 7 * 24 * 60 * 60);
        setCookie("pwd", "321321", 7 * 24 * 60 * 60);
        setCookie("phone", "17386415171", 7 * 24 * 60 * 60);
        setCookie("email", "321321@qq.com", 7 * 24 * 60 * 60);
    }

    del.onclick = function () {
        // console.log(111111);
        // document.cookie = ""; // 赋值 => 新增一条cookie => 新增cookie中没有键名和键值 => 新增失败

        // setCookie("user", "", -1);
        // setCookie("pwd", "", -1);
        // setCookie("phone", "", -1);
        // setCookie("email", "", -1);

        deleteCookie("user");
        deleteCookie("pwd");
        deleteCookie("phone");
        deleteCookie("email");

        location.reload();
    }





</script>

</html>